<template>
  <div class="allsearch">
    <el-alert :closable="false">
      <el-row>
        <el-col :span="5">
          <el-cascader
            expand-trigger="hover"
            :options="options"
            v-model="selectedOptions1"
            @change="handleChange"
            placeholder="课程分类"
          ></el-cascader>
        </el-col>
        <el-col :span="5">
          <el-select v-model="value" placeholder="标签搜索">
            <el-option>
              <el-autocomplete
                class="inline-input"
                v-model="state"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
              ></el-autocomplete>
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select v-model="value" placeholder="课程状态">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="value" placeholder="类型">
            <el-option
              v-for="item in type"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-input v-model="input1" placeholder="标题"></el-input>
        </el-col>
      </el-row>
      <el-row style="margin-top:10px;">
        <el-col :span="6"><el-input v-model="inpu2" placeholder="创建"></el-input></el-col>
        <el-col :span="18"><el-button type="primary" size="middle" style="margin-left:10px;">搜索</el-button></el-col>
      </el-row>
    </el-alert>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions1: [],
      selectedOptions2: [],
      restaurants: [],
      state: "",
      input1: "",
      input2: "",
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致"
                },
                {
                  value: "fankui",
                  label: "反馈"
                },
                {
                  value: "xiaolv",
                  label: "效率"
                },
                {
                  value: "kekong",
                  label: "可控"
                }
              ]
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航"
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航"
                }
              ]
            }
          ]
        },
        {
          value: "kuaijichuji",
          label: "会计初级职称",
          children: [
            {
              value: "2018beikao",
              label: "18年备考"
            },
            {
              value: "2019beikao",
              label: "19年备考"
            }
          ]
        }
      ],
      status: [
        {
          value: "pre",
          label: "未发布"
        },
        {
          value: "get",
          label: "已发布"
        },
        {
          value: "close",
          label: "已关闭"
        }
      ],
      type: [
        {
          value: "zhibo",
          label: "直播课程"
        },
        {
          value: "putong",
          label: "普通课程"
        }
      ]
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    loadAll() {
      return [
        { value: "三全鲜食（北新泾店）", address: "长宁区新渔路144号" },
        {
          value: "Hot honey 首尔炸鸡（仙霞路）",
          address: "上海市长宁区淞虹路661号"
        },
        {
          value: "新旺角茶餐厅",
          address: "上海市普陀区真北路988号创邑金沙谷6号楼113"
        },
        { value: "泷千家(天山西路店)", address: "天山西路438号" },
        {
          value: "胖仙女纸杯蛋糕（上海凌空店）",
          address: "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"
        }
      ];
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
};
</script>

<style lang="scss" scoped>
  .allsearch{
    margin-top:20px;
  }
</style>

